<script setup lang="ts">
import {ref, onMounted, onUnmounted, nextTick, toRaw} from 'vue';
import * as echarts from 'echarts';
import type {DataItem} from "@/store/dataType";

const chartDom = ref(null);
let chartInstance = null;

let currentValue = ref()
let clickedSign = ref(false)

// type Props = {
//   mostQuestion:string,
// }
//
// let props = defineProps<Props>()
console.log("$$%#%")
let mostQuestion = ref()
mostQuestion.value = localStorage.getItem("mostQuestion")



onMounted(async () => {
  await nextTick();
  chartInstance = echarts.init(chartDom.value);

  let option = {
    color: ['#dcf3cf','#aef199', '#7ce394', '#54cb99',
      '#41b4b4', '#33878d'],
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },

    toolbox: {
      //设置正常颜色
      // iconStyle: {
      //   color: "white",
      //   // borderColor: "#6a6da9"
      //   borderColor: "#94d6da"
      //   // backgroundColor
      // },
      emphasis: {
        iconStyle: {
          // borderColor: "#78a355"
          // borderColor: "#33a3dc"
          borderColor: "#009e7d"
        }
      },
      show: true,

    },
    series: [
      {
        name: 'Area Mode',
        type: 'pie',
        radius: [50, 120],
        roseType: 'area',
        itemStyle: {
          borderRadius: 5
        },
        emphasis: {
          focus: 'series'
        },
        data: JSON.parse(localStorage.getItem("timeData"))
      }
    ]
  };

  chartInstance.setOption(option);
  chartInstance.on('click', function(params) {
    currentValue.value = params.value
    clickedSign.value = true
  })
})

// 处理点击事件并且跳转到相应的百度搜索页面



onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});

let chatTimeData = JSON.parse(localStorage.getItem("timeData"))
</script>

<template>
  <div class="flex justify-center items-start w-full h-full pr--80 ">
    <div ref="chartDom" class="w-85% h-90% ml--25"></div>
    <div v-show="clickedSign==true" class="fixed top-70 right-104">提问次数：{{ currentValue }}</div>
    <div class="w-27% flex flex-col justify-start items-start  gap-2 mt-5 ml--10">
      <div class="">您的活跃时段</div>
      <div><span class="text-7 text-#009e7d font-bold font-italic">{{Number(chatTimeData[0].name)}}-{{Number(chatTimeData[0].name)+1}}</span>&nbsp;点
      </div>
      <div class="mt-2">提问了</div>
      <div><span class="text-7 text-#009e7d font-bold font-italic">{{chatTimeData[0].value}}</span>&nbsp;次
      </div>
      <div class="mt-2">在该时间段，您曽提问</div>
      <div><span class="text-5 text-#009e7d font-bold font-italic">{{mostQuestion}}</span>
      </div>
    </div>
  </div>

</template>

<style scoped>

</style>